<template>
  <!-- cec页面主文件 -->
  <div class="view-page">
    <module-header></module-header>

    <div class="cec-page">
      <div class="trade-container">
        <div class="full-left">
          <div class="full-left-top">
            <div class="pair-header">
              <!-- 交易对-切换-->
              <div class="current-pair selected-text">
                <span class="pair-name">BTC/USDT</span>
                <i class="iconfont icon-jiantou"></i>
                <!-- 交易对选择列表 -->
                <div class="trade-pro-market">
                  <div class="trade-heade">
                    <ul class="market-list">
                      <li
                        class="market-bar"
                        @click="marketCoinClik('fav')"
                        :class="isMarketCoin=='fav'?'selected-text':''"
                      >
                        <i class="iconfont icon-xing"></i>
                        自选
                      </li>
                      <li
                        class="market-bar"
                        @click="marketCoinClik('USDT')"
                        :class="isMarketCoin=='USDT'?'selected-text':''"
                      >USDT</li>
                      <li
                        class="market-bar"
                        @click="marketCoinClik('BTC')"
                        :class="isMarketCoin=='BTC'?'selected-text':''"
                      >BTC</li>
                      <li
                        class="market-bar"
                        @click="marketCoinClik('ETH')"
                        :class="isMarketCoin=='ETH'?'selected-text':''"
                      >ETH</li>
                    </ul>
                    <div class="input-div">
                      <input type="text" value />
                      <i class="iconfont icon-sousu"></i>
                    </div>
                  </div>
                  <ul class="trade-type-header">
                    <li class="market-icon"></li>
                    <li class="market-pair">交易对</li>
                    <li class="market-price">
                      最新价
                      <span class="dp-sort-icon">
                        <i
                          class="el-icon-caret-top"
                          @click="sortClick('priceTop')"
                          :class="sortCurrent=='priceTop'?'light-sort':''"
                        ></i>
                        <i
                          class="el-icon-caret-bottom"
                          @click="sortClick('priceDown')"
                          :class="sortCurrent=='priceDown'?'light-sort':''"
                        ></i>
                      </span>
                    </li>
                    <li class="market-increase">
                      24H涨跌幅
                      <span class="dp-sort-icon">
                        <i
                          class="el-icon-caret-top"
                          @click="sortClick('increaseTop')"
                          :class="sortCurrent=='increaseTop'?'light-sort':''"
                        ></i>
                        <i
                          class="el-icon-caret-bottom"
                          @click="sortClick('increaseDown')"
                          :class="sortCurrent=='increaseDown'?'light-sort':''"
                        ></i>
                      </span>
                    </li>
                    <li class="day-val">
                      24H成交额
                      <span class="dp-sort-icon">
                        <i
                          class="el-icon-caret-top"
                          @click="sortClick('valTop')"
                          :class="sortCurrent=='valTop'?'light-sort':''"
                        ></i>
                        <i
                          class="el-icon-caret-bottom"
                          @click="sortClick('valDown')"
                          :class="sortCurrent=='valDown'?'light-sort':''"
                        ></i>
                      </span>
                    </li>
                  </ul>
                  <!-- 交易对列表 -->
                  <GeminiScrollbar :ops="ops" class="pair-list">
                    <component :is="isMarket" v-for="(item,index) in 10" :key="index"></component>
                  </GeminiScrollbar>
                </div>
              </div>
              <!-- 币种-简介 -->

              <div class="coin-info">
                <!-- <GeminiScrollbar>
            
                </GeminiScrollbar>-->
                <i class="iconfont icon-i1"></i>
                <GeminiScrollbar class="production-container">
                  <div class="content-box">
                    <div class="title-box">
                      <span class="coin-name">BTC 比特币</span>
                      <a href class="project-link">项目披露</a>
                    </div>
                    <div class="list-box">
                      <div class="list-lump">
                        <span class="list-hint">发行时间</span>
                        <span class="list-text">2008-11-01</span>
                      </div>
                      <div class="list-lump">
                        <span class="list-hint">发行总量</span>
                        <span class="list-text">2100万BTC</span>
                      </div>
                    </div>
                    <div class="list-box">
                      <div class="list-lump">
                        <span class="list-hint">流通总量</span>
                        <span class="list-text">16996037</span>
                      </div>
                      <div class="list-lump">
                        <span class="list-hint">众筹价格</span>
                        <span class="list-text">-</span>
                      </div>
                    </div>
                    <div class="list-box">
                      <div class="list-lump">
                        <span class="list-hint">官网</span>
                        <span class="list-text">
                          <a href>https://www.eotodo.com</a>
                        </span>
                      </div>
                    </div>
                    <div class="list-box">
                      <div class="list-lump">
                        <span class="list-hint">白皮书</span>
                        <span class="list-text">
                          <a href>https://www.eotodo.com</a>
                        </span>
                      </div>
                    </div>
                    <div class="list-box">
                      <div class="list-lump">
                        <span class="list-hint">介绍</span>
                        <span class="list-text">
                          <a href>更多</a>
                        </span>
                      </div>
                    </div>
                    <p
                      class="project-content"
                    >比特币（bitcoin）的概念最初由中本聪在2009年提出，根据中本聪的思路设计发布的开源软件以及建构其上的p2p网络。比特币是一种p2p形式的数字货币。点对点的传输意味着一个去中心化的支付系统。与大多数货币不同，比特币不依靠特定货币机构发行，它依据特定算法，通过大量的计算产生，比特币经济使用整个p2p网络中众多节点构成的分布式数据库来确认并记录所有的交易行为，并使用密码学的设计来确保货币流通各个环节安全性。p2p的去中心化特性与算法本身可以确保无法通过大量制造比特币来人为操控币值。</p>
                    <p
                      class="project-content"
                    >比特币（bitcoin）的概念最初由中本聪在2009年提出，根据中本聪的思路设计发布的开源软件以及建构其上的p2p网络。比特币是一种p2p形式的数字货币。点对点的传输意味着一个去中心化的支付系统。与大多数货币不同，比特币不依靠特定货币机构发行，它依据特定算法，通过大量的计算产生，比特币经济使用整个p2p网络中众多节点构成的分布式数据库来确认并记录所有的交易行为，并使用密码学的设计来确保货币流通各个环节安全性。p2p的去中心化特性与算法本身可以确保无法通过大量制造比特币来人为操控币值。</p>
                  </div>
                </GeminiScrollbar>
              </div>

              <ul class="pair-info">
                <li>
                  <p class="price-box">10351.60</p>
                  <span class="price-legal">≈ ¥ 73794.50</span>
                </li>
                <li class="pair-deal-items">
                  <p>2H涨跌</p>
                  <span>+2.61%</span>
                </li>
                <li class="pair-deal-items">
                  <p>2H最高价</p>
                  <span>123456.36</span>
                </li>
                <li class="pair-deal-items">
                  <p>2H最低价</p>
                  <span>225.36</span>
                </li>
                <li class="pair-deal-items">
                  <p>2H成交额</p>
                  <span>36363USDT</span>
                </li>
              </ul>
            </div>
            <div class="charts-box">
              <Map></Map>
            </div>
          </div>
          <div class="full-left-bottom">
            <div class="spot-asset">
              <div>资产</div>
              <!-- 可用币 -->
              <div class="asset-nuit">
                LTC 可用
                <span class="asset-lighet">&nbsp;0.000000 &nbsp;</span>
              </div>
              <div>
                / &nbsp;冻结
                <span class="asset-lighet">&nbsp;0.00000000 &nbsp;</span>
              </div>
              <div class="asset-charge" v-if="isLogin">划转BTC</div>
              <!-- 计价币 -->
              <div class="asset-nuit">
                USDT 可用
                <span class="asset-lighet">&nbsp;0.000000 &nbsp;</span>
              </div>
              <div>
                / &nbsp; 冻结
                <span class="asset-lighet">&nbsp;0.00000000 &nbsp;</span>
              </div>
              <div class="asset-charge" v-if="isLogin">划转USDT</div>
              <div class="asset-login">
                <router-link to="login">登录</router-link>
              </div>
            </div>
            <record></record>
          </div>
        </div>
        <div class="full-right">
          <div class="real">
            <div class="real-box">
              <Real>实时成交</Real>
            </div>

            <div class="trade-box">
             <Trade>交易</Trade>
            </div>
          </div>
          <div class="handicp">
           <Handicp>盘口</Handicp>
          </div>
        </div>
      </div>
    </div>
    <module-footer></module-footer>
  </div>
</template>
<script>
import ModuleHeader from "../page-module-public/public-header.vue";
import ModuleFooter from "../page-module-public/public-footer.vue";
import CoinMarket from "./market-module/coin-market-list";
import FavMarket from "./market-module/fav-market-list";
import Map from "./market-module/map-market";
import record from "./record-module/record";

import Real from "./real-module/real"
import Handicp from "./handicp-module/handicp"
import Trade from "./trade-module/trade" 
export default {
  data() {
    return {
      isMarketCoin: "BTC",
      isMarket: "CoinMarket",
      sortCurrent: "",
      isLogin: false,
      ops: {
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: true,
          keepShow: false,
          background: "#80ffff ",
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: "6px",
          disable: false
        }
      }
    };
  },
  components: {
    ModuleHeader,
    ModuleFooter,
    CoinMarket,
    FavMarket,
    Map,
    record,
    Real,
    Handicp,
    Trade,
  },
  methods: {
    /*
     * 市场交易对的切换
     */
    marketCoinClik(val) {
      this.isMarketCoin = val;
      switch (val) {
        case "fav":
          this.break;

        default:
          break;
      }
      if (val == "fav") {
        this.isMarket = "FavMarket";
      } else {
        this.isMarket = "CoinMarket";
      }
      console.log("点击的信息", val);
      this.sortCurrent = "";
    },
    /*
     * 筛选按钮的点击
     */
    sortClick(val) {
      this.sortCurrent = val;
    }
  },

  computed: {},

  created() {},

  mounted() {}
};
</script>
<style lang="less" scoped>
.b {
  border: solid 1px red;
}
/*
*公共数据
*/
.hide,
/deep/ .hide {
  display: none;
}
.current-text,
/deep/ .current-text {
  color: #5795f1 !important;
}
.view-page {
  width: 100%;
  min-width: 1280px;
  background-color: #05193d;
  min-height: 100vh;
  .cec-page {
    background-color: #000000;
  }
  .trade-container {
    display: flex;
    -ms-flex: auto;
    flex: auto;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
    min-height: 550px;
    .full-left {
      width: 63%;
      margin-right: 4px;
      -webkit-box-orient: vertical;
      -ms-flex-direction: column;
      flex-direction: column;
      .full-left-top {
        background-color: #05193d;
      }
      .full-left-bottom {
        .spot-asset {
          display: flex;
          margin-top: 4px;
          margin-bottom: 4px;
          flex-wrap: nowrap;
          background-color: #05193d;
          border-radius: 0;
          height: 41px;
          align-items: center;
          padding: 0 16px;
          color: hsla(0, 0%, 100%, 0.25);
          font-size: 12px;
          position: relative;
          .asset-nuit {
            margin-left: 40px;
          }
          .asset-lighet {
            color: hsla(0, 0%, 100%, 0.8);
          }
          .asset-charge {
            margin-left: 5px;
            color: #3075ee;
            cursor: pointer;
          }
          .asset-login {
            float: right;
           
            cursor: pointer;
            position: absolute;
            right: 16px;
            a{
              color: #3075ee;
            }
          }
        }
      }
    }
    .full-right{
      display: flex;
      flex-grow:1 ;
      border:solid 1px rebeccapurple;
      // 成交
      .real{
        flex: 1;
        min-width: 290px;
        display: flex;
        flex-direction: column;
        height: 100%;
        .real-box{
          width:100%;
          flex: 1;
        }
        .trade-box{
          flex: 1;
          margin-top: 5px;
        }
      }
      // 盘口
      .handicp{
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 100%;
       outline: solid 1px hsla(0, 0%, 100%, 0.2);
      }
    }
  }
  .pair-header {
    display: flex;
    color: hsla(0, 0%, 100%, 0.5);
    height: 40px;
    align-items: center;
    padding: 0 24px;
    border-top: solid 1px #060d1e;
    border-bottom: solid 1px #060d1e;

    .current-pair {
      font-size: 20px;
      margin-right: 10px;
      position: relative;
      cursor: pointer;
      .iconfont {
        display: inline-block;
        transition: all 0.3s;
      }
      .pair-name {
        line-height: 40px;
      }
      /*
      * 市场切换
      */
      .trade-pro-market {
        position: absolute;
        top: 40px;
        z-index: 9999;
        width: 520px;
        height: 0px;
        overflow: hidden;
        background: #1b3157;
        box-shadow: 0 1px 10px 0 rgba(6, 13, 30, 0.5);
        /*
        *选择bar
        */
        .trade-heade {
          padding: 0 10px;
          height: 35px;
          border-bottom: 1px solid #060d1e;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .market-list {
            display: flex;
            color: #fff;
            .market-bar {
              float: left;
              line-height: 35px;
              cursor: pointer;
              margin-right: 16px;
              font-size: 14px;
            }
          }
          .input-div {
            float: right;
            height: 22px;
            width: 104px;
            background: hsla(0, 0%, 100%, 0.45);
            input {
              width: 88px;
              height: 22px;
              vertical-align: top;
              font-size: 12px;
              cursor: pointer;
              padding-left: 5px;
              border: 1px solid #7e8188;
              color: #7e8188;
              background-color: #0a1f45;
            }
          }
        }
        /*
        *类型，表头
        */
        .trade-type-header {
          height: 30px;
          border-bottom: 1px solid #060d1e;
          display: flex;
          /*
        *表头类型的样式
        */
        }
        .trade-type-header li,
        .pair-list /deep/ li {
          font-size: 12px;
          height: 30px;
          line-height: 30px;

          display: flex;
          -moz-align-items: center;
          align-items: center;
        }
        .trade-type-header li {
          border-left: 1px solid #060d1e;
        }
        .market-icon {
          width: 26px;
          border-left: none;
        }
        .pair-list /deep/ .market-icon {
          width: 16px;
          border-left: none;
        }
        .market-pair,
        .pair-list /deep/ .market-pair {
          width: 90px;
          padding-left: 5px;
        }
        .market-price,
        .pair-list /deep/ .market-price {
          width: 160px;
          padding-left: 5px;
        }
        .market-increase,
        .pair-list /deep/ .market-increase {
          width: 90px;
          padding-right: 5px;
          justify-content: flex-end;
        }
        .day-val,
        .pair-list /deep/ .day-val {
          width: 144px;
          padding-right: 5px;
          justify-content: flex-end;
        }
        /*
        *交易对列表
        */
        .pair-list {
          width: 100%;
          overflow-y: scroll;
          height: 240px;
        }
        .pair-list /deep/ .coin-market-list {
          display: flex;
          padding: 0 10px;
        }
        .pair-list /deep/ .coin-market-list:hover {
          background-color: #05193d;
        }
      }
      /*
      *市场公有属性
      */
      .selected-text,
      .pair-list /deep/ .selected-text {
        color: #5795f1;
      }
    }
    .current-pair:hover {
      .icon-jiantou {
        transform: rotate(180deg);
      }

      .trade-pro-market {
        height: 305px;
      }
    }
    /*
    * 币种信息
    */
    .coin-info {
      width: 16px;

      margin-right: 5px;
      position: relative;
      top: 0;
      left: 0;
      cursor: pointer;
      .icon-i1 {
        color: #2e65b8;
        line-height: 40px;
      }
      .production-container {
        .content-box {
          padding: 16px;
        }
        width: 408px;
        height: 388px;
        position: absolute;

        cursor: default;
        z-index: 10;
        left: -15px;
        top: 40px;
        padding-top: 5px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #1b3157;
        overflow-y: scroll;
        display: none;
        border-radius: 2px;
        a {
          color: #3075ee;
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .title-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
          .coin-name {
            font-size: 16px;
            font-weight: 500;
            color: #fff;
          }
        }
        .list-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 27px;
          line-height: 27px;

          .list-lump {
            min-width: 40%;
          }
          .list-hint {
            color: #6e7e99;
            min-width: 56px;
            font-size: 12px;
            display: inline-block;
            margin-right: 8px;
            margin-bottom: 5px;
          }
          .list-text {
            color: hsla(0, 0%, 100%, 0.8);
            font-size: 12px;

            font-weight: 400;
          }
        }
        .project-content {
          color: hsla(0, 0%, 100%, 0.7);
          font-size: 12px;
          font-weight: 400;
          line-height: 24px;
          text-align: justify;
        }
      }
    }
    .coin-info:hover .production-container {
      display: block;
    }
    /*
    *交易对信息
    */
    .pair-info {
      display: flex;
      height: 40px;
      align-items: center;
      li {
        margin-right: 30px;
      }
      .price-box {
        font-size: 18px;
      }
      .price-legal {
        font-size: 12px;
      }
      .pair-deal-items {
        p {
          font-size: 14px;
          color: hsla(0, 0%, 100%, 0.5);

          // margin-bottom: 5px;
        }
        span {
          font-size: 12px;
          color: hsla(0, 0%, 100%, 0.8);
        }
      }
    }
  }
}
</style>
